<template>
  <flow :data="ajax.list" @onScroll="onScroll" :top="props.top" @scrolltolower="scrolltolower"></flow>
</template>

<script setup>
  import flow from '@/pages/index/index3Compontents/flow.vue';
  import { ref, getCurrentInstance, watch, reactive, nextTick } from 'vue';
  import debounce from '@/uni_modules/uv-ui-tools/libs/function/debounce.js';
  import { getWeek } from '@/common/js/fn.js';
  const instance = getCurrentInstance();
  const props = defineProps({
    current: {
      type: Number,
      default: 0
    },
    top: {
      type: Number,
      default: 0
    }
  });
  let params = reactive({
    pageSize: 10,
    currentPage: 1,
    classify: 'Teacher',
    sort: 0
  });
  let ajax = reactive({
    list: [],
    totalPage: 1
  });

  let init = async () => {
    let options = JSON.parse(JSON.stringify(params));
    options.orderBy = ['Lesson', params.sort ? 'asc' : 'desc'];
    let { pagination, lessons } = await uni.$uv.http.post('/app/collect/lessons', options);
    ajax.totalPage = pagination.totalPage;
    ajax.list.push(
      ...lessons.map((r, i) => {
        let videoAddress = '',
          cover = '',
          autoVideo = false,
          teacher,
          title,
          lesson;
        if (r.classify === 'OnlineLesson') {
          videoAddress = r.dynamicCover;
          cover = r.lessonPhoto;
          lesson = {
            grade: r.grade || 1,
            name: r.lessonName,
            lessonNumber: r.lessonItems.length
          };
        } else if (r.classify === 'Video') {
          videoAddress = r.address;
          cover = r.cover;
          teacher = {
            name: r.teacher.username,
            avatar: r.teacher.profilePhoto,
            id: r.teacher.id
          };
          title = r.title;
        } else {
          videoAddress = r.video.address;
          lesson = {
            grade: r.lesson.grade || 1,
            name: r.lesson.name,
            merchant: r.lesson.merchant.headquater.name + ` (${r.lesson.merchant?.name})`,
            time: getWeek(r.issueDate) + ' ' + r.timeDuration
          };
          cover = r.video.cover;
        }
        if (['Lesson','MerchantLesson', 'Video'].includes(r.classify) && [0, 1].includes(i)) {
          autoVideo = true;
        }
        if (r.classify === 'OnlineLesson' && i === 0) {
          autoVideo = true;
        }
        return { ...r, autoVideo, videoAddress, cover, teacher, title, lesson };
      })
    );
  };
  watch(
    () => props.current,
    val => {
      if (val === 0) {
        ajax.list = [];
        init();
      }
    },
    { immediate: true }
  );

  let scrollOldTop = ref(0),
    scrollActive = ref(0);
  let autoVideo = () => {
    ajax.list.forEach(r => {
      r.autoVideo = false;
    });
    let num = scrollActive.value;
    // 如果是竖着的，那下个也要播放
    if (['Lesson','MerchantLesson', 'Video'].includes(ajax.list[num].classify) && ['Lesson','MerchantLesson', 'Video'].includes(ajax.list[num + 1].classify)) {
      ajax.list[num + 1].autoVideo = true;
    }
    ajax.list[num].autoVideo = true;
  };
  // 滚动事件，然后加了个防抖
  const onScroll = ({ detail, active }) => {
    scrollOldTop.value = detail.scrollTop;
    scrollActive.value = active;
    autoVideo();
  };
  // 滚动到底部
  const scrolltolower = active => {
    scrollActive.value = active;
    autoVideo();
    if (params.currentPage >= ajax.totalPage) return;
    params.currentPage++;
    init();
  };
</script>

<style lang="scss" scoped></style>
